<template>
    <div class='col-6 col-md-4 col-xl-3 col-xxl-2'>
      <router-link
        class='tags-item flex' role="button"
        :to="{ path: ArticlePath.TAG_PATH + id, query: { tagName: name } }">
        <div class='item-count font-number'>{{ count }}</div>
        <div class='item-icon iconfont icon-biaoqian'></div>
        <div class='item-title flex-fill mt-2'>
          <div class='h-1x'>{{ name }}</div>
        </div>
      </router-link>
    </div>
</template>

<script lang="ts">
import { defineComponent, toRefs } from 'vue'
import { ArticlePath } from '@/models/@types'

export default defineComponent({
  name: 'ObTagItem',
  props: ['id', 'name', 'count', 'size'],
  computed: {
    ArticlePath() {
      return ArticlePath
    }
  },
  setup(props) {
    const tagSize = toRefs(props).size
    const stylingTag = () => {
      if (tagSize.value === 'xs') {
        return {
          fontSize: '0.75rem',
          lineHeight: '1rem'
        }
      }
      if (tagSize.value === 'sm') {
        return {
          fontSize: '0.875rem',
          lineHeight: '1.25rem'
        }
      }
      if (tagSize.value === 'lg') {
        return {
          fontSize: '1.125rem',
          lineHeight: '1.75rem'
        }
      }
      if (tagSize.value === 'xl') {
        return {
          fontSize: '1.25rem',
          lineHeight: '1.75rem'
        }
      }
      if (tagSize.value === '2xl') {
        return {
          fontSize: '1.5rem',
          lineHeight: '2rem'
        }
      }
      return {
        fontSize: '1rem',
        lineHeight: '1.5rem'
      }
    }
    return { stylingTag }
  }
})
</script>
<style scoped>
.col-6 {
    flex: 0 0 auto;
    width: 50%;
    padding: 0.125rem;
}
@media (min-width: 768px) {
    .col-md-4 {
        flex: 0 0 auto;
        width: 33.33333333%;
    }
}
@media (min-width: 1200px) {
    .col-xl-3 {
        flex: 0 0 auto;
        width: 25%;
    }
}
@media (min-width: 1400px) {
    .col-xxl-2 {
        flex: 0 0 auto;
        width: 25%;
    }
}
.tags-item{
    position: relative;
    overflow: hidden;
    flex: 1 1 auto;
    flex-direction: column;
    border: 2px solid #fff;
    border-radius: 8px;
    transition: all .3s ease-in-out;
    padding: 1rem;
    background: var(--tags-color);
    box-shadow: var(--box-shadow-white);
    opacity: 1 !important;
}
.tags-item:hover{
    border-color: var(--sun-color);
}
.tags-item .item-count {
    position: absolute;
    right: 5px;
    bottom: 0;
    font-size: 3rem;
    line-height: 1;
    font-style: italic;
    transform: translate(-10px,0%);
    opacity: .1;
    transition: all .3s ease-in-out;
}
.font-number {
    font-family: 'TCloudNumber',arial,sans-serif;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}
.tags-item .item-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background-color: #20232b;
    font-size: 1rem;
    color: #fff;
    text-shadow: 0 2px 4px rgb(0 0 0/10%);
}
.item-title{
    -webkit-box-flex: 1;
    flex: 1 1 auto;
}
.h-1x {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}
</style>
